


<script setup name="AttachmentPicture">
import { attachmentGetList } from "@/api/sys/attachment";
import DictTreeLeft from "@/views/sys/dict/treeLeft";
import Picture from "@/views/sys/attachment/Attachments/picture";
import { getCurrentInstance, reactive } from "vue";
import AttachmentCurd from "@/views/sys/attachment/curd.vue";
const { proxy } = getCurrentInstance();

const pd = reactive({
  attachmentList: [],
  loading: true,
  showSearch: true,
  ids: [],
  total: 0,
  title: "",
  daterangeUpdateTime: [],
  queryParams: {
    treeId: 108,
    pageNum: 1,
    pageSize: 10,
    url: null,
    type: null,
    updateTime: null
  },
  rules: {

  }
});

/** 节点单击事件 */
function handleTreeNodeClick(data) {
  pd.queryParams.treeId = data.id;
  handleQuery();
}

function handleAccomplish(list) {
  getList()
}

function attachmentCurdOk() {
  getList()
}

/** 查询附件列表 */
function getList() {
  pd.loading = true;
  pd.queryParams.params = {};
  if (null != pd.daterangeUpdateTime && '' != pd.daterangeUpdateTime) {
    pd.queryParams.params["beginUpdateTime"] = pd.daterangeUpdateTime[0];
    pd.queryParams.params["endUpdateTime"] = pd.daterangeUpdateTime[1];
  }
  attachmentGetList(pd.queryParams).then(res => {
    pd.attachmentList = res.data;
    pd.total = res.total;
    pd.loading = false;
  });
}



/** 搜索按钮操作 */
function handleQuery() {
  pd.queryParams.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  pd.daterangeUpdateTime = [];
  pd.queryParams.treeId = null;
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  pd.ids = selection.map(item => item.id);
  pd.single = selection.length != 1;
  pd.multiple = !selection.length;
}


/** 新增按钮操作 */
function handleOpen(row) {
  if (row) {
    proxy.$refs["attachmentCurdRef"].edit(row);
  } else {
    proxy.$refs["attachmentCurdRef"].add(row);
  }
}

/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$refs["attachmentCurdRef"].del(row.id);
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('system/attachment/export', {
    ...pd.queryParams
  }, `attachment_${new Date().getTime()}.xlsx`)
}

getList();
</script>


<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--类别数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <DictTreeLeft ref="dictLeftTreeRef" dict="sys_attachment_picture" @ok="handleTreeNodeClick" />
        </div>
      </el-col>

      <el-col :span="20" :xs="24">
        <el-form :model="pd.queryParams" ref="queryRef" :inline="true" v-show="pd.showSearch" label-width="68px">
          <el-form-item label="URL" prop="url">
            <el-input v-model="pd.queryParams.url" placeholder="请输入访问URL" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="文件名称" prop="type">
            <el-input v-model="pd.queryParams.name" placeholder="请输入文件名称" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="更新时间" style="width: 308px">
            <el-date-picker v-model="pd.daterangeUpdateTime" value-format="YYYY-MM-DD" type="daterange"
              range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-col>
          <el-col :span="1.5">
            <Picture :styleType="true" @ok="handleAccomplish" />
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport"
              v-hasPermi="['sys:attachment:export']">导出</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="pd.showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="pd.loading" :data="pd.attachmentList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="附件ID" align="center" prop="id" />
          <el-table-column label="访问URL" align="center" prop="url">
            <template #default="scope">
              <el-tooltip :content="scope.row.url" effect="customized" placement="left">
                <el-image style="width: 50px; height: 50px" :src="scope.row.url" :fit="fill" />
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="文件名称" align="center" prop="name" />
          <el-table-column label="文件类型" align="center" prop="type" />
          <el-table-column label="文件分类" align="center" prop="treeName" />
          <el-table-column label="文件大小" align="center" prop="fileSize" />
          <el-table-column label="备注" align="center" prop="remark" />
          <el-table-column label="创建者" align="center" prop="createBy" />
          <el-table-column label="创建时间" align="center" prop="createTime" width="150">
            <template #default="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="更新者" align="center" prop="updateBy" />
          <el-table-column label="更新时间" align="center" prop="updateTime" width="150">
            <template #default="scope">
              <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" width="180" label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="handleOpen(scope.row)"
                v-hasPermi="['sys:attachment:edit']">修改</el-button>
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                v-hasPermi="['sys:attachment:remove']">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="pd.total > 0" :total="pd.total" v-model:page="pd.queryParams.pageNum"
          v-model:limit="pd.queryParams.pageSize" @pagination="getList" />

      </el-col>
    </el-row>
  </div>
  <AttachmentCurd ref="attachmentCurdRef" @ok="attachmentCurdOk"></AttachmentCurd>
</template>

<style>
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
</style>